<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" :fullscreen="false" :destroy-on-close="true" width="500px" v-loading="loading" :close-on-click-modal="false"
        title="编辑tabbar">
        <el-form label-width="120px" label-position="right" v-if="currentItem">
            <el-form-item label="默认图标" required>
                <image-picker v-model="currentItem.iconPath"></image-picker>
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    最佳图片尺寸 宽度100px，高度100px 或同比例
                </div>
            </el-form-item>

            <el-form-item label="选中图标" required>
                <image-picker v-model="currentItem.selectedIconPath"></image-picker>
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    最佳图片尺寸 宽度100px，高度100px 或同比例
                </div>
            </el-form-item>

            <el-form-item label="按钮文字" required>
                <el-input style="width: 200px" maxlength="5" v-model="currentItem.text" placeholder></el-input>
            </el-form-item>

            <el-form-item v-if="!currentItem.is_system" label="是否启用">
                <el-switch style="width: 200px" active-text="已启用" inactive-text="未启用"
                    v-model="currentItem.enable"></el-switch>
            </el-form-item>

        </el-form>
        <div slot="footer">
            <el-button size="small" @click="cancleHandle">取消</el-button>
            <el-button size="small" type="primary" @click="submitHandle">保存</el-button>
        </div>

    </el-dialog>
</template>
  
<script>
// import LinkEditor from "@/components/LinkEditor";
import ImagePicker from "@/components/ImagePicker";
import PositionSelector from "@/components/PositionSelector";
import { updateTabbar, deleteTabbar, createTabbar } from "@/api/tabbar.js";
export default {
    components: { ImagePicker, PositionSelector },
    data () {
        return {
            show: false,
            showMore: false,
            currentItem: null,
            loading: false,
        };
    },

    mounted: function () { },

    computed: {

    },

    methods: {
        openDialog: function (ban) {
            // TODO
            this.show = true
            this.currentItem = ban
        },

        closeDialog: function () {
            this.show = false
            this.currentItem = {}
        },

        validate: function (ban) {
            if (!ban.text) {
                this.$message.error("按钮文字不能为空");
                return false;
            }

            if (!ban.color || !ban.selectedColor) {
                this.$message.error("按钮文字颜色不能为空");
                return false;
            }

            if (!ban.pagePath) {
                this.$message.error("页面路径不能为空");
                return false;
            }

            if (!ban.iconPath || !ban.selectedIconPath) {
                this.$message.error("tabbar图标不能为空");
                return false;
            }

            return true;
        },

        submitHandle: function () {
            var data = this.currentItem;
            // validate
            var isok = this.validate(data);
            if (!isok) {
                return false;
            }

            this.loading = true;
            if (data.id == null) {
                createTabbar(data).then((res) => {
                    this.loading = false;
                    if (res.status != 0) {
                        return;
                    }
                    this.$message.success("已保存");
                    this.$emit("change");
                    this.show = false
                })
                return
            }
            updateTabbar(data).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.$message.success("已保存");
                this.$emit("change");
                this.show = false
            });
        },

        cancleHandle: function () {
            this.$emit("cancle");
            this.show = false
        },

        deleteHandle: function () {
            this.$confirm("确定要删除这个tabbar吗？").then(() => {
                this._deleteHandle();
            });
        },

        _deleteHandle: function () {
            this.loading = true;
            deleteTabbar(this.currentItem.id).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.$emit("change");
            });
        },
    },
};
</script>
  
<style scoped></style>
  